<script setup lang="ts">
import { ref, onMounted } from 'vue'
import StudentLeaveFormCard from './components/StudentLeaveFormCard.vue'
import StudentLeaveCard from './components/StudentLeaveCard.vue'
import { getStudentLeaveList } from '@/services/home.ts'
// 导入会员Store
import { useMemberStore } from '@/stores'
import type { StudentLeaveItem, StudentLeaveParams } from '@/types/studentLeave'
// 获取会员Store实例
const memberStore = useMemberStore()

const studentLeave = ref<StudentLeaveItem>()
const studentLeaveList = ref<StudentLeaveItem[]>([])
const studentLeavePage = ref<StudentLeaveParams>({ pageNum: 1, pageSize: 10 })
// 当前下拉刷新状态
const isTriggered = ref(false)
const hasMoreData = ref(true)
// 新增分类状态
const isStudent = memberStore.profile?.role === 'student'
const currentTab = ref('my') // 'all' | 'my'
if (!isStudent) {
  currentTab.value = 'all'
}

// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  if (currentTab.value === 'all') {
    studentLeavePage.value.pageNum = 1
    studentLeavePage.value.pageSize = 10
    await getStudentLeaveListData(studentLeavePage.value)
  } else {
    studentLeave.value = {} as StudentLeaveItem
  }
  isTriggered.value = false
}

const getStudentLeaveListData = async (pageParams: StudentLeaveParams) => {
  // 登录状态下，添加 studentId 参数
  if (isStudent) {
    pageParams.studentId = memberStore.profile?.userId
  } else {
    pageParams.teacherId = memberStore.profile?.userId
  }

  // 如果是下拉刷新，清空现有数据
  if (pageParams.pageNum === 1) {
    studentLeaveList.value = []
    hasMoreData.value = true
  }

  // 如果没有更多数据，直接返回
  if (!hasMoreData.value) {
    return
  }

  try {
    const res = await getStudentLeaveList(pageParams)
    // 添加数据
    if (pageParams.pageNum === 1) {
      studentLeaveList.value = res.data.rows
    } else {
      studentLeaveList.value = [...studentLeaveList.value, ...res.data.rows]
    }
    // 判断是否还有更多数据
    hasMoreData.value = res.data.rows.length === pageParams.pageSize
    // 更新页码
    studentLeavePage.value.pageNum = pageParams.pageNum
  } catch (error) {
    console.error('获取消息列表失败:', error)
  }
}
const handleLoadMore = () => {
  if (currentTab.value === 'all' && hasMoreData.value) {
    studentLeavePage.value.pageNum = (studentLeavePage.value.pageNum ?? 1) + 1
    getStudentLeaveListData(studentLeavePage.value)
  }
}

// 切换标签
const switchTab = (tab: 'all' | 'my') => {
  currentTab.value = tab
  // 切换标签时如果对应列表为空，则加载数据
  if (tab === 'all' && studentLeaveList.value.length === 0) {
    getStudentLeaveListData({ pageNum: 1, pageSize: 10 })
  }
}

const isLoading = ref(false)
onMounted(async () => {
  isLoading.value = true
  await Promise.all([getStudentLeaveListData({ pageNum: 1, pageSize: 10 })])
  isLoading.value = false
})
</script>

<template>
  <!-- 新增分类标签栏 -->
  <view class="tab-bar" v-if="isStudent">
    <view class="tab-item" :class="{ active: currentTab === 'my' }" @click="switchTab('my')">
      <text>我要请假</text>
      <view class="tab-indicator" v-if="currentTab === 'my'"></view>
    </view>
    <view class="tab-item" :class="{ active: currentTab === 'all' }" @click="switchTab('all')">
      <text>请假记录</text>
      <view class="tab-indicator" v-if="currentTab === 'all'"></view>
    </view>
  </view>
  <!-- 我的课程标签内容 -->
  <view v-if="currentTab === 'my' && isStudent">
    <StudentLeaveFormCard />
  </view>
  <view v-if="currentTab === 'all'">
    <!-- 滚动容器 -->
    <scroll-view
      :enable-back-to-top="true"
      :refresher-enabled="true"
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="handleLoadMore"
      class="message-list"
      :scroll-y="true"
    >
      <StudentLeaveCard
        v-for="item in studentLeaveList"
        :key="item.id ?? item.toString()"
        :studentLeave="item"
      />
      <!-- 空状态显示 -->
      <view class="empty-state" v-if="studentLeaveList.length === 0 && currentTab === 'all'">
        <text class="empty-text">暂无相关数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}
/* 新增标签栏样式 */
.tab-bar {
  display: flex;
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f2f5;
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text {
      font-size: 32rpx;
      color: #666;
      transition: color 0.3s ease;
    }
    &.active {
      text {
        color: #333;
        font-weight: 600;
      }
    }
    .tab-indicator {
      position: absolute;
      bottom: 0;
      width: 60rpx;
      height: 6rpx;
      background: #07c160; // 使用主色调
      border-radius: 3rpx;
      transition: width 0.3s ease;
    }
  }
}

/* 新增空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
  }
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 原有样式调整 */
.message-list {
  /* 调整顶部边距 */
  padding-top: 0;
  height: calc(100vh - 88rpx); /* 计算可视高度 */
}
</style>
